<template>
    <el-table :data="tableData" style="width: 100%;height:500px" border>
        <el-table-column prop="order_id" label="订单ID" width="250"/>
        <el-table-column prop="score" label="评分" width="130"/>
        <el-table-column prop="content" label="评价内容" width="150"/>
        <el-table-column prop="img" label="评价图片" width="180">
            <template #default="{row}">
                <img :src="fullUrl(row.img)" style="width: 100px;height: 100px" alt="">
            </template>
        </el-table-column>
<!--        <el-table-column prop="user_id" label="用户" width="180"/>-->
        <el-table-column prop="create_time" label="订单创建时间" />
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup lang="ts">

import {ref, watch} from "vue";
import {getEvaluateLog} from "/@/api/backend/technician";
import Template from "/@/lang/backend/en/sms/template";
import {fullUrl} from "/@/utils/common";

const props = defineProps({
    technician_id: {
        type: Number,
        default: 0
    }
})

watch(() => props.technician_id, (val) => {
    if (val > 0) {
        serviceLog(currentPage.value, pageSize.value)
    }
})


const tableData = ref();
const total = ref();
const serviceLog = (page: number, limit: number) => {
    getEvaluateLog({technician_id: props.technician_id, page: page, limit: limit}).then(res => {
        console.log(" res.data.list", res.data.list)
        tableData.value = res.data.list
        total.value = res.data.total
    })
}


//分页
const currentPage = ref(1)
const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    currentPage.value = 1
    pageSize.value = val
    serviceLog(currentPage.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    serviceLog(currentPage.value, pageSize.value)
}

//查看详情
const handleClick = () => {
    console.log('click')
}
</script>
<style scoped lang="scss">

</style>
